<template>
  <div class="food-head">
    <router-link to='/'>
      <div class="left back-index"> < </div>
    </router-link>
     <h2 class='right'> {{name}} </h2>
  </div>
</template>

<script>
  export default {
    name: 'title',
    props: ['name']
  }
</script>

<style lang="scss" secoped>
  @import '../../static/hotcss/px2rem';
  .food-head{
      position: fixed;
      top: 0;
      width: 100%;
      height: px2rem(44);
      background-color: #2395ff;
      a{
        display: inline-block;
        .back-index{
          width: px2rem(44);
          height: px2rem(44);
          line-height: px2rem(44);
          text-align: center;
          font-size: px2rem(31);
          color: #fff;
        }
      }
      h2{
        width: 100%;
        line-height: px2rem(44);
        height: px2rem(44);
        margin-left: px2rem(-44);
        text-align: center;
        color: #fff;
      }
    }
</style>